<template>
  <div class="jiayao">
    <div class="contentDiv">
      <div class="leftDiv">
        <div class="leftTop">
            <div class="topbg">
              <span class="shebei">24H测点趋势曲线</span>
            </div>
            <div class="echDiv">
                <div id="zoushi" class="echarts"></div>
            </div>
        </div>

        <div class="leftBottom">
          <div class="topbg">
            <span class="shebei">可视化界面</span>
          </div>
          <div class="echDiv">
            <div id="cesiumDiv"></div>
          </div>
        </div>
      </div>
      <div class="rightDiv">
        <div class="leftTop">
          <div class="topbg">
            <div class="topbg1">
              <span class="shebei">数据展示</span>
            </div>
            <div class="bottombg1">
                <div class="shuju">
                    <div class="oDiv"><img src="../../assets/images/shuju1.png" alt=""></div>
                    <div class="oDiv oDivF">
                      <span><span class="font12">106</span>次</span>
                      <span class="modelTitle">模型训练次数</span>
                    </div>
                </div>
                <div class="shuju">
                    <div class="oDiv"><img src="../../assets/images/shuju2.png" alt=""></div>
                    <div class="oDiv oDivF">
                      <span><span class="font12">0.3</span>mg/L</span>
                      <span class="modelTitle">推荐加药流量</span>
                    </div>
                </div>



            </div>
          </div>
          <div class="echDiv">
            <div class="topbg1">
              <span class="shebei">控制方法</span>
            </div>
            <div class="bottombg1">
              <div class="height10">平台智能控制</div>
              <div class="centerDiv">
                  <div>
                    <img src="../../assets/images/centerS1.png" alt="">
                    <p>智能算法控制</p>
                  </div>
                  <div>
                    <img src="../../assets/images/centerS2.png" alt="">
                    <p>默认逻辑控制</p>
                  </div>
                  <div>
                    <img src="../../assets/images/centerS3.png" alt="">
                    <p>停用自动控制</p>
                  </div>

              </div>
              <div class="height10">手动/临时控制</div>
              <div class="height20" style="display: flex;">
                <el-input
                  v-model="input1"
                  style="width: 18rem;"
                  placeholder="请输入加药流量（m3/h）"
                  class="input-with-select"
                >
                </el-input>
                <el-button type="primary">确认</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="leftBottom">
          <div class="topbg">
            <span class="shebei">报警事件</span>
          </div>
          <div class="echDiv">
            <div class="centerDiv">
              <div>
                <p>水质异常事件</p>
                <img src="../../assets/images/weizhi.png" alt="">
                <p>暂无事件</p>
              </div>
              <div>
                <p>指令下发事件</p>
                <img src="../../assets/images/weizhi.png" alt="">
                <p>暂无事件</p>
              </div>
              <div>
                <p>模型计算事件</p>
                <img src="../../assets/images/weizhi.png" alt="">
                <p>暂无事件</p>
              </div>
            </div>
            <div class="rizhi">
                <p>控制日志</p>
                <div class="rizhihis">
                    <div>
                      2024-04-01 12:00:00<br>手动调节加药流量至0.4(m3/h)
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import * as Cesium from 'cesium';
import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
const apiKey =  "AAPK9afd0a76a6aa4b9ab6731982a53d10b2ZIWCKoYT1Lo7dDGOMi5xjcY7TIBkpfvmPkyV7_ZNYpr0b-0JOl4Gencs8EVb2aXy"; // 替换为你的 API 密钥
const cesiumAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZjRjOGQwNy1iODM1LTQzNTEtYTFkZS1lMWQ2NTM3Zjk5ZGMiLCJpZCI6MjA0NDM5LCJpYXQiOjE3MTE0MTYyNjV9.7fi9z31YPkF29lSSrvYpWaGLqoR6FiexnXkACPbP8sc";
let viewer,viewer2,modelType,modelName;
export default {
  name: "jiayao",
  props: {
    pageName: String,
  },
  data() {
    return {
      dialogTableVisible:false,
      dialogjiexi:false,
      input1:''
    };
  },
  mounted() {
    this.initCesium(this.pageName);
    this.jiexifunction();
  },
  methods: {

    async initCesium(content) {
      // 清除原有的 Viewer 对象
      if (viewer2 && !viewer2.isDestroyed()) {
        viewer2.destroy();
      }

      viewer2 = new Cesium.Viewer('cesiumDiv',{
        baseLayerPicker: false, // 不显示图层选择器
        fullscreenButton: false, // 不显示全屏按钮
        homeButton: false, // 不显示返回初始位置按钮
        infoBox: false, // 不显示信息框
        sceneModePicker: false, // 不显示场景模式选择器
        selectionIndicator: false, // 不显示选择指示器
        timeline: false,
        animation: false,
        geocoder: false,
        navigationHelpButton: false, // 隐藏右上角的问号图标
        baseLayer: null // 设置为 null，表示不显示底图
      });
      let tilesetone;
      try {
        tilesetone = await Cesium.Cesium3DTileset.fromIonAssetId(content);
        viewer2.scene.primitives.add(tilesetone);
        await viewer2.zoomTo(tilesetone);
      } catch (error) {
        console.log(error);
      }


    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询信息列表 */
    getList() {
      this.loading = true;
      listCkxx(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },


    //解析方法

    jiexifunction(){

      const data = {
        time: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
        flowIn: [120, 130, 125, 140, 135, 150, 155, 160, 165, 170, 180, 185, 190, 195, 200, 210, 220, 215, 210, 205, 200, 190, 180, 170],
        flowSteam: [80, 85, 90, 95, 100, 105, 110, 115, 120, 125, 130, 135, 140, 145, 150, 155, 160, 165, 170, 175, 180, 185, 190, 195],
        turbidity: [2.5, 2.4, 2.3, 2.2, 2.1, 2.0, 1.9, 1.8, 1.7, 1.6, 1.5, 1.4, 1.3, 1.2, 1.1, 1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8],
        temperature: [25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 39, 38, 37, 36, 35, 34, 33, 32],
        residualChlorine: [0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2.0, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8]
      };

      const option = {

        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: '5%', // 设置图例距离容器顶部的距离为容器高度的 80%
          textStyle: {
            color: 'white' // 设置图例文字颜色为白色
          },
          data: ['进水流量', '进汽流量', '前馈水质浊度', '前馈水质温度', '前馈水质余氯']
        },
        grid: {
          left: '3%',
          top: '15%',
          right: '3%%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.time,
          axisLabel: {
            color: 'white' // 设置X轴文字颜色为白色
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: 'white' // 设置X轴文字颜色为白色
          }
        },
        series: [
          {
            name: '进水流量',
            type: 'line',
            smooth: true, // 设置平滑曲线
            data: data.flowIn
          },
          {
            name: '进汽流量',
            type: 'line',
            smooth: true, // 设置平滑曲线
            data: data.flowSteam
          },
          {
            name: '前馈水质浊度',
            type: 'line',
            smooth: true, // 设置平滑曲线
            data: data.turbidity
          },
          {
            name: '前馈水质温度',
            type: 'line',
            smooth: true, // 设置平滑曲线
            data: data.temperature
          },
          {
            name: '前馈水质余氯',
            type: 'line',
            smooth: true, // 设置平滑曲线
            data: data.residualChlorine
          }
        ]
      };
      this.myChart = echarts.init(document.getElementById("zoushi"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },

    //隐藏弹框
    hiddenTan(){
      this.dialogTableVisible = false;
      this.dialogjiexi = false;
    },

    /** 查看按钮操作 */
    handleUpdate(row) {
      this.dialogTableVisible = true;
      this.kaoqinEcharts()
    },
    kaoqinEcharts(){

      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          textStyle: {
            color: 'white' // 设置图例文本的颜色为红色
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '在岗' },
              { value: 735, name: '迟到' },
              { value: 580, name: '早退' },
              { value: 300, name: '请假' }
            ]
          }
        ]
      };

      this.myChart = echarts.init(document.getElementById("kaoecharts"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });


    },
    getWaringColor(waringji) {
      switch (waringji) {
        case '严重告警':
          return '#E6307B'; // 严重告警的颜色
        case '重要告警':
          return '#ED6942'; // 重要告警的颜色
        case '一般告警':
          return '#0289FF'; // 一般告警的颜色
        default:
          return ''; // 默认颜色
      }
    }
  }
};
</script>

<style scoped lang="scss">
.jiayao{
  width: 100%;
  height: 100%;
  :deep(.el-form-item__label){
    color: white;
  }
  :deep(.el-tabs__item) {
    font-size: 1.2rem!important;
    color: white;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
  }
  :deep(.el-tabs__item.is-active) {
    color: #1890ff;
  }
  .el-table, :deep(.el-table tr){
    background-color: transparent!important;
  }
  .el-table thead {
    background-color: transparent;
  }
  :deep(.el-table .el-table__header-wrapper th), :deep(.el-table .el-table__fixed-header-wrapper th) {
    color: white;
  }
  :deep(.el-table th.el-table__cell.is-leaf),  :deep(.el-table td.el-table__cell){
    border-bottom: none;
    color: white;
  }
  :deep(.el-table tr:hover) {
    background-color: transparent !important;
  }
  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background-color: transparent !important;
  }
  :deep(.el-table::before) {
    height: 0px;
  }
  .contentDiv{
    position: absolute;
    width: 80%;
    height: 86%;
    left: 18%;
    top: 7%;
    display: flex;
    .leftDiv,.rightDiv{
      width: 50%;
      height: 100%;
      color: white;
      padding: 0.5rem;
    }
    .leftDiv{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .leftBottom,.leftTop{
        width: 100%;
        height: 49%;
      }
      .leftTop{
        .topbg{
          width: 100%;
          height: 8%;
          background-image: url("../../assets/images/bgS.png");
          background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
          background-repeat: no-repeat; /* 不重复平铺 */
          background-position: center; /* 图片居中对齐 */
          margin: 0; /* 去除默认的外边距 */
          padding: 0; /* 去除默认的内边距 */
          position: relative;
          .shebei{
            position: absolute;
            top: 0.2rem;
            left: 3.5rem;
            font-size: 1.2rem;
            font-weight: 600;
            color: white;
          }
        }
        .echDiv{
          width: 100%;
          height: 92%;
          background-image: url("../../assets/images/zuoDiv.png");
          background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
          background-repeat: no-repeat; /* 不重复平铺 */
          background-position: center; /* 图片居中对齐 */
          margin: 0; /* 去除默认的外边距 */
          padding: 0; /* 去除默认的内边距 */
          position: relative;


          #zoushi{
            width: 99%;
            height: 99%;
          }

        }

      }
      .leftBottom{
        .topbg{
          width: 100%;
          height: 8%;
          background-image: url("../../assets/images/bgS.png");
          background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
          background-repeat: no-repeat; /* 不重复平铺 */
          background-position: center; /* 图片居中对齐 */
          margin: 0; /* 去除默认的外边距 */
          padding: 0; /* 去除默认的内边距 */
          position: relative;
          .shebei{
            position: absolute;
            top: 0.2rem;
            left: 3.5rem;
            font-size: 1.2rem;
            font-weight: 600;
            color: white;
          }
        }
        .echDiv{
          width: 100%;
          height: 92%;
          background-image: url("../../assets/images/zuoDiv.png");
          background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
          background-repeat: no-repeat; /* 不重复平铺 */
          background-position: center; /* 图片居中对齐 */
          margin: 0; /* 去除默认的外边距 */
          padding: 0; /* 去除默认的内边距 */
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          #cesiumDiv{
            width: 99%;
            height: 99%;
          }
        }


      }
    }

    .rightDiv{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .leftBottom,.leftTop{
        width: 100%;
        height: 49%;
        display: flex;
      }
      .leftTop{
        justify-content: space-between;
        .topbg{
          width: 40%;
          height: 100%;

          .topbg1{
            width: 100%;
            height: 8%;
            background-image: url("../../assets/images/shuju.png");
            background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
            background-repeat: no-repeat; /* 不重复平铺 */
            background-position: center; /* 图片居中对齐 */
            margin: 0; /* 去除默认的外边距 */
            padding: 0; /* 去除默认的内边距 */
            position: relative;
            .shebei{
              position: absolute;
              top: 0.2rem;
              left: 3rem;
              font-size: 1.2rem;
              font-weight: 600;
              color: white;
            }
          }

          .bottombg1{
            width: 100%;
            height: 92%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-image: url("../../assets/images/shujul.png");
            background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
            background-repeat: no-repeat; /* 不重复平铺 */
            background-position: center; /* 图片居中对齐 */
            margin: 0; /* 去除默认的外边距 */
            padding: 0; /* 去除默认的内边距 */
            position: relative;
            .shuju{
              display: flex;
              width: 100%;
              height: 50%;
              .oDiv{
                flex: 1;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                .font12{
                  color: #0289FF;
                  font-size: 2rem;
                  font-weight: 600;
                }
                img{
                  width: 70%;
                }
              }
            }

          }
        }
        .echDiv{
          width: 59%;
          height: 100%;
          .topbg1{
            width: 100%;
            height: 8%;
            background-image: url("../../assets/images/kongzhi.png");
            background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
            background-repeat: no-repeat; /* 不重复平铺 */
            background-position: center; /* 图片居中对齐 */
            margin: 0; /* 去除默认的外边距 */
            padding: 0; /* 去除默认的内边距 */
            position: relative;
            .shebei{
              position: absolute;
              top: 0.2rem;
              left: 3rem;
              font-size: 1.2rem;
              font-weight: 600;
              color: white;
            }
          }
          .bottombg1{
            width: 100%;
            height: 92%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-image: url("../../assets/images/shujur.png");
            background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
            background-repeat: no-repeat; /* 不重复平铺 */
            background-position: center; /* 图片居中对齐 */
            margin: 0; /* 去除默认的外边距 */
            padding: 0; /* 去除默认的内边距 */
            position: relative;
            padding:0 1rem;
            font-size: 1rem;
            .height10{
              width: 100%;
              height: 10%;
              display: flex;
              align-items: center;
              font-size: 1rem;
            }
            .height20{
              width: 100%;
              height: 20%;
              display: flex;
              align-items: center;
              text-align: center;
              justify-content: center;
            }
            .centerDiv{
              width: 100%;
              height: 50%;
              display: flex;
              align-items: center;
              justify-content: space-evenly;
              img{
                width: 5rem;
              }
              div{
                width: 30%;
                height: 80%;
                background-image: url("../../assets/images/centerS.png");
                background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
                background-repeat: no-repeat; /* 不重复平铺 */
                background-position: center; /* 图片居中对齐 */
                margin: 0; /* 去除默认的外边距 */
                padding: 0; /* 去除默认的内边距 */
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              }
            }


          }



        }

      }
      .leftBottom{
        display: flex;
        flex-direction: column;
        .topbg{
          width: 100%;
          height: 8%;
          background-image: url("../../assets/images/bgS.png");
          background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
          background-repeat: no-repeat; /* 不重复平铺 */
          background-position: center; /* 图片居中对齐 */
          margin: 0; /* 去除默认的外边距 */
          padding: 0; /* 去除默认的内边距 */
          position: relative;
          .shebei{
            position: absolute;
            top: 0.2rem;
            left: 3.5rem;
            font-size: 1.2rem;
            font-weight: 600;
            color: white;
          }
        }
        .echDiv{
          width: 100%;
          height: 92%;
          background-image: url("../../assets/images/zuoDiv.png");
          background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
          background-repeat: no-repeat; /* 不重复平铺 */
          background-position: center; /* 图片居中对齐 */
          margin: 0; /* 去除默认的外边距 */
          padding: 0; /* 去除默认的内边距 */
          position: relative;
          .centerDiv{
            width: 100%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 1rem;
            img{
              width: 5rem;
            }
            div{
              width: 30%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              p:nth-of-type(1){
                font-size: 1rem;
                display: inline-block;
              }
              p:nth-of-type(2){
                font-size: 0.8rem;
                display: inline-block;
              }
            }
          }
          .rizhi{
            width: 100%;
            height: 50%;
            padding:0 1rem;
            p{
              margin-left: 1rem;
            }
            .rizhihis{
              display: flex;
              flex-wrap: wrap;
              div{
                background: linear-gradient( 90deg, #05BEFF 0%, rgba(2,137,255,0) 100%);
                border-radius: 5px;
                padding: 0.3rem;
                margin: 0 0.5rem;
                cursor: pointer;
              }
            }
          }
        }


      }
    }










  }
  .h100{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    .tanDiv{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #081F31;
      z-index: 222;
      opacity: 0.8;
    }
    .diaStyle{
      /* 修改弹框样式 */
      position: relative;
      width: 71rem;
      height: 43rem;
      background-image: url("../../assets/images/total.png");
      background-size: contain; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      padding: 2rem 3rem;
      z-index: 333;
      :deep(.el-tabs__item) {font-size: 1.2rem!important;color: white; font-family: PingFangSC, PingFang SC;font-weight: 500;}
      :deep(.el-tabs__item.is-active) {color: #1890ff;}
      .xx{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: -1rem;
        right: -1rem;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .export{ position: absolute; right: 3rem;top: 2.2rem;cursor: pointer;z-index: 9999;}
      .warningContent{
        padding: 2rem 3rem;
        color: white;
        div:nth-of-type(1) span{
          font-family: HYYaKuHei, HYYaKuHei;
          font-weight: normal;
          font-size: 1.5rem;
          color: #FFFFFF;
        }
        div:nth-of-type(2){
          .baseSession{
            margin-top: 1.5rem;
            span{
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 1.2rem;
              line-height: 2.2rem;
              color: #FFFFFF;
            }
          }
          .mt10{
            :deep(.el-table thead) {
              background-color: #01B0FF!important;
            }
          }
        }


      }

      .warningContent1{
        padding: 2rem 3rem;
        color: white;
        height: 100%;
        .wt{
          font-family: HYYaKuHei, HYYaKuHei;
          font-weight: normal;
          font-size: 1.5rem;
          color: #FFFFFF;
          display: flex;
          align-items: center;
        }
        .wb{
          height: 80%;
          .baseSession{
            height: 100%;
            margin-top: 1.5rem;
            display: flex;
            .leftSession{
              flex: 1;
              padding: 3rem;
              p{
                line-height: 2rem;
              }
            }
            .rightSession{
              flex: 1;
              #kaoecharts{
                width: 30rem;
                height: 30rem;
              }
            }
          }
        }


      }
    }
  }

}


</style>

